<template>
  <div class="demo-form">
    <el-form ref="formRef" :inline="true" :model="queryData" label-width="auto" label-position="right" size="default">
      <el-form-item label="数据名称" prop="name">
        <el-input v-model="queryData.name" />
      </el-form-item>
      <el-form-item label="城市" prop="region">
        <el-select style="width:150px" v-model="queryData.region" placeholder="请选择城市">
          <el-option label="上海" value="1" />
          <el-option label="北京" value="2" />
        </el-select>
      </el-form-item>
      <el-form-item label="时间" prop="">
        <el-date-picker v-model="queryData.date1" type="datetime" placeholder="起始时间" style="width: 200px" />
        <span style="margin: 0 0.5rem">-</span>
        <el-date-picker v-model="queryData.date2" type="datetime" placeholder="截至时间" style="width: 200px" />
      </el-form-item>
      <el-form-item label="爱好" prop="hobby">
        <el-checkbox-group v-model="queryData.hobby">
          <el-checkbox-button label="1" name="hobby">琴</el-checkbox-button>
          <el-checkbox-button label="2" name="hobby">棋</el-checkbox-button>
          <el-checkbox-button label="3" name="hobby">书</el-checkbox-button>
          <el-checkbox-button label="4" name="hobby">画</el-checkbox-button>
        </el-checkbox-group>
      </el-form-item>
      <el-form-item label="性别" prop="gender">
        <el-radio-group v-model="queryData.gender">
          <el-radio border value="1">男</el-radio>
          <el-radio border value="0">女</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">查询</el-button>
        <el-button @click="resetForm">重置</el-button>
      </el-form-item>
    </el-form>
  </div>

  <div class="demo-data-table">
    <el-table ref="singleTableRef" :data="tableData" highlight-current-row style="width: 100%"
      @current-change="handleCurrentChangeTable">
      <!-- <el-table-column type="index" width="50" /> -->
      <el-table-column type="selection" width="50" />
      <el-table-column sortable property="date" label="日期" width="120" />
      <el-table-column property="name" label="名称" width="120" />
      <el-table-column property="address" label="地址" />
      <el-table-column label="操作">
        <template #default="scope">
          <el-button size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>


  <div class="demo-pagination-block" style="margin-top:20px;">
    <el-pagination v-model:currentPage="currentPage" v-model:page-size="pageSize" :page-sizes="[10, 20, 30, 40]"
      size="small" :disabled=false :background="true" layout="total, sizes, prev, pager, next, jumper" :total="200"
      @size-change="handleSizeChange" @current-change="handleCurrentChange" />
  </div>
</template>
<script lang="ts" setup>
import { ref, reactive } from 'vue'
import { ElTable } from 'element-plus'

// 表单
const queryData = reactive({
  name: '',
  region: '',
  date1: '',
  date2: '',
  delivery: false,
  hobby: ['2', '3'],
  gender: '1',
  desc: '',
})

const formRef = ref(null)
  
const onSubmit = () => {  
  // 处理查询逻辑  
};  
  
const resetForm = () => {  
  console.log(formRef.value?.resetFields)
  // 重置表单  
  formRef.value?.resetFields()
};  

// 数据表格
interface User {
  date: string
  name: string
  address: string
}

const currentRow = ref()
const singleTableRef = ref<InstanceType<typeof ElTable>>()


const handleCurrentChangeTable = (val: User | undefined) => {
  currentRow.value = val
}
const tableData: User[] = [
  {
    date: '2016-05-03',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-02',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-04',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
]

// 编辑，删除按钮
const handleEdit = (index: number, row: User) => {
  console.log(index, row)
}
const handleDelete = (index: number, row: User) => {
  console.log(index, row)
}









// 分页
const currentPage = ref(4)
const pageSize = ref(10)

const handleSizeChange = (val: number) => {
  console.log(`${val} items per page`)
}
const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`)
}



</script>

<style scoped>
.demo-pagination-block+.demo-pagination-block {
  margin-top: 10px;
}

.demo-pagination-block .demonstration {
  margin-bottom: 16px;
}
</style>
